<template>
    <a-modal
        :class="['dialog', themeType]"
        v-model:visible="props.openVis"
        :title="props.title"
        :width="props.width"
        :maskClosable="true"
        @cancel="handleCancel"
        destroy-on-close
    >
        <slot name="container"></slot>
        <template #footer></template>
    </a-modal>
</template>

<script setup lang="ts">
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const emit = defineEmits(['close']);
    const props = defineProps({
        width: {
            type: String,
        },
        openVis: {
            type: Boolean,
        },
        title: {
            type: String,
        },
    });
    const { themeType } = useTheme();

    function handleCancel() {
        emit('close');
    }
</script>

<style lang="less">
    .dialog {
        border: 1px solid #0a50a0;
        background-color: #00152b;
        padding-bottom: 0;
        min-height: 300px;
        box-shadow:
            0 3px 6px -4px #0000001f,
            0 6px 16px #00000014,
            0 9px 28px 8px #0000000d;

        .ant-modal-title {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            min-height: 40px;
            height: 40px;
            background-size: 100% 100%;
            color: #ffffff !important;
            padding-left: 2%;
            font-size: 18px;
            font-weight: bold;
        }

        .ant-modal-header {
            padding: 0 !important;
            border-bottom: none;
        }

        .ant-modal-header,
        .ant-modal-content {
            background-color: transparent !important;
            box-shadow: none;
        }

        .ant-modal-body {
            padding: 0 !important;
        }

        .anticon {
            color: #999999 !important;
            height: 40px;
        }

        .ant-modal-close-x {
            color: #999999 !important;
            height: 40px;
            line-height: 40px;
        }

        .ant-modal-footer {
            border-top: none !important;
        }

        .ant-modal-wrap {
            //background-color: rgba(0, 0, 0, 0.6);
        }
    }
</style>
